<template>
  <div>
    <ve-histogram
      :height="chartHeight"
      :data="censusData"
      :settings="chartSettings"
      :extend="chartExtend"
      :mark-line="markLine"
    />
  </div>
</template>

<script>
export default {
  props: {
    censusData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    this.chartSettings = {}
    return {
      chartHeight: '360px',
      chartExtend: {
        series: {
          showSymbol: false,
          stack: 'intelirri',
          barMaxWidth: 20
        },
        color: ['#409EFF'],
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '18%',
          containLabel: true
        }
      },
      markLine: {
        data: [
          [{ type: 'min' }, { type: 'max' }]
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
